<template>
	 <scroll-view
	 class="album_scroll_view"
	 scroll-y
	 @scrolltolower="handleToLower"
	 >
		<view class="album_swiper">
			<swiper 
			indicator-dots 
			autoplay 
			circular>
				<swiper-item
				v-for="item in banner"
				:key="item.id"
				>
					<image :src="item.thumb" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="album_list">
			<navigator class="album_item"
			v-for="item in album"
			:key="item.id"
			:url="`/pages/album/index?id=${item.id}`"
			>
				<view class="album_img">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_info">
					<view class="album_name">{{item.name}}</view>
					<view class="album_desc">{{item.desc}}</view>
					<view class="album_btn">
						<view class="album_attention">
							关注
						</view>
					</view>
				</view>
			</navigator>
		</view>
	 </scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					limit: 20,
					order: "new",
					skip: 0
				},
				
				banner: [],
				album: [],
				
				haveMore: true
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await this.$http({
					url:'/image/v1/wallpaper/album',
					data: this.params
				})
				if(res.res.album.length == 0) {
					this.haveMore = false;
					return
				}
				if(this.banner.length == 0) {
					this.banner = res.res.banner;
				}
				this.album = [...this.album, ...res.res.album];
			},
			handleToLower() {
				if(this.haveMore) {
					this.params.skip += this.params.limit;
					this.getList()
				}else {
					uni.showToast({
						title:"没有更多了...",
						icon:"none"
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.album_scroll_view {
	  height: calc(100vh - 36px);
	}
	.album_swiper {
	  swiper {
	    // 750rpx 326.0869565217392
	    // height: calc(750rpx / 2.3 );
	    height: 326.1rpx;
	    image {
	      height: 100%;
	    }
	  }
	}
	.album_list {
	  padding: 10rpx;
	  .album_item {
	    padding: 10rpx 0;
	    display: flex;
	    border-bottom: 1rpx solid #ccc;
	    .album_img {
	      flex: 1;
	      padding: 10rpx;
	      image {
	        width: 200rpx;
	        height: 200rpx;
	      }
	    }
	
	    .album_info {
	      flex: 2;
	      padding: 0 10rpx;
	      overflow: hidden;
	      .album_name {
	        font-size: 30rpx;
	        color: #000;
	        padding: 10rpx 0;
	      }
	
	      .album_desc {
	        padding: 10rpx 0;
	        font-size: 24rpx;
	
	        text-overflow: ellipsis;
	        overflow: hidden;
	        white-space: nowrap;
	      }
	
	      .album_btn {
	        padding: 10rpx;
	        display: flex;
	        justify-content: flex-end;
	        .album_attention {
	          color: $color;
	          border: 1rpx solid $color;
	          padding: 10rpx;
	        }
	      }
	    }
	  }
	}
</style>
